Syntax Highlighting

2 posts
TanStack Markdown과 Highlight

TanStack Markdown과 Highlight

문서 사이트를 만들다 보면 이상한 순간이 옵니다. 정작 보여주려는 건 글자 몇 천 개인데, 그걸 그리려고 내려받는 자바스크립트가 1MB를 넘어가는 거죠. 😅 TanStack 팀이 딱 이 상황이었습니다. tanstack.com의 문서 페이지 하나가 스크립트만 약 1.1MiB를 전송하고 있었는데, 그중 358KiB 정도가 오직 코드 구문 강조에 쓰이고 있었어요. 이걸 React Server Components로 감추는 대신, 팀은 도구 자체를 작게 만드는 쪽을 택했습니다. 그렇게 나온 게 TanStack Markdown과 TanSta

Shiki로 코드 하이라이팅하기

Shiki로 코드 하이라이팅하기

개발 블로그나 기술 문서를 작성할 때 코드를 예쁘게 보여주는 것은 생각보다 중요한 문제입니다. 읽기 좋은 코드 하이라이팅은 독자가 내용을 빠르게 파악하는 데 큰 도움이 되기 때문이죠. 이번 포스팅에서는 VS Code와 동일한 문법 엔진을 사용해서 아름답고 정확한 코드 하이라이팅을 제공하는 Shiki에 대해서 알아보겠습니다. Shiki란? Shiki(式, 일본어로 "스타일"이라는 뜻)는 코드를 구문 강조(syntax highlighting)해주는 JavaScript 라이브러리입니다. VS Code에서 사용하는 것과 동일한 TextMa